<template>
  <scroll-view class="recommend_view" scroll-y v-if="recommends.length>0" @scrolltolower="handleToLower">
    <!-- 推荐 开始 -->
    <view class="recommend_wrap">
      <navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target}`">
        <image :src="item.thumb" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 推荐 结束 -->

    <!-- 月份 开始 -->
    <view class="months_wrap">
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text>{{months.DD}} / </text>
            {{months.MM}}月
          </view>
          <view class="months_text">{{months.title}}</view>
        </view>
        <view class="months_title_more"></view>
      </view>
      <view class="months_content">
        <view class="months_item" v-for="(item,index) in months.items" :key="item.id">
          <go-detail :list="months.items" :index="index">
          <image :src="item.thumb+item.rule.replace('$<Height>',360 )" mode="aspectFill"></image>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 月份 结束 -->

    <!-- 热门 开始 -->
    <view class="hots_wrap">
      <view class="hot_title">
        <text>热门</text>
      </view>
      <view class="hot_content">
        <view class="hot_item" v-for="(item, index) in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image :src="item.thumb" mode="widthFix"></image>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门 结束 -->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail";
export default {
  components:{
    goDetail
  },
  data(){
    return{
      //推荐列表
      recommends:[],
      //月份
      months:{},
      //热门
      hots:[],
      //请求的参数
      params:{
        limit: 30,		//  获取多少条数据
        order: "hot",	  //	关键字 “hot”
        skip: 0	  //	跳过多少条
      },
      //是否还有下一页
      hasMore:true,
    }
  },
  mounted(){
    this.getList();
  },
  methods:{
    //获取接口数据
    getList(){
      this.request({
      url:"http://157.122.54.189:9088/image/v3/homepage/vertical",
      data: this.params,
      }).then(result=>{
      //判断还有没有下一页数据
      if(result.res.vertical.length === 0){
        this.hasMore = false;
        return;
      }
      if(this.recommends.length === 0){
           //推荐模块
      this.recommends = result.res.homepage[1].items;
      //月份模块
      this.months = result.res.homepage[2];
      // 将时间戳 改成 18号/月 moment.js
      this.months.MM = moment(this.months.stime).format("MM");
      this.months.DD = moment(this.months.stime).format("DD");

      }

      //获取热门数据列表
      //数组拼接
      this.hots = [...this.hots, ...result.res.vertical]; //ES6
    });
    },

    //滚动触底事件
    handleToLower(){
      //  1.修改参数 skip+=limit;
      //  2.重新发送请求 getList()
      //  3.请求成功后 hots数据叠加
      if(this.hasMore){
      this.params.skip += this.params.limit;
      this.getList();
      }else{
        //弹窗提示用户已到最后一页
        uni.showToast({
          title:"已经到底了哦",
          icon:"none"
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped >
  .recommend_view {
    //  height： 屏幕高度-标题高度
    height: calc( 100vh - 36px);
  }
  .recommend_wrap{
    // flex 布局
    display: flex;
    flex-wrap: wrap;
    .recommend_item{
      width: 50%;
      border: 5rpx solid #ffffff;
    }
  }

  .months_wrap{
    .months_title {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
     .months_title_info {
       color: $color;
       font-size: 30rpx;
       font-weight: 600;
       display: flex;
        .months_info {
          text {
            font-size: 36rpx;
          }
      }

      .months_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }

    .months_title_more {
        font-size: 24rpx;
        color: $color;
      }
    }

    .months_content {
        display:flex;
        flex-wrap: wrap;
        .months_item{
          width: 33.33%;
          border: 5rpx solid #fff;
        }
      }
  }
  
  .hots_wrap {
    .hot_title {
      padding: 20rpx;
      text {
      border-left: 5px solid $color;
      font-size: 34rpx;
      padding-left: 20rpx;
      font-weight: 600;
      }
    }

    .hot_content {
      display: flex;
      flex-wrap: wrap;
      .hot_item {
        width: 33.33%;
        border: 5rpx solid #fff;
      }
    }
  }
</style>